<template>
	<!-- 人车监测 -->
	<view class="p-10">
		<view class="bg-white p-5">
			<u-tabs lineColor="#2172FC" :current="currentKey" :list="[{name: '人员'},{name: '车辆'}]" lineWidth="50" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @change="selectChange"></u-tabs>
		</view>
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1" class="m-t-10 bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">{{`${currentKey == 0 ? '人员' : '车辆'}区域分布`}}</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="2" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">{{currentKey == 0 ? '区域入侵告警统计分析' : '车辆预警统计'}}</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">{{`${currentKey == 0 ? '人员' : '车辆'}定位列表`}}</text></view>
				</template>
				<view class="leader-list">
					<template v-if="currentKey == 0">
						<view class="leader-list-item" style="background: #F5F7FE;" v-for="(item, index) in peoplelist" :key="index">
							<view class="left">
								<u-avatar size="60" src="/static/img/avatar.png" shape="square"></u-avatar>
								<view class="m-l-10">
									<view class="">
										<text class="name m-r-10">{{ item.name }}</text>
										<u-tag text="内部" size="mini" bgColor="#4481E5" shape="circle"></u-tag>
									</view>
									<view class="m-t-5 flex"> <u-icon name="map"></u-icon><text style="color: #555D6F; font-size: 24rpx;">西采场(机电部)</text> </view>
								</view>
							</view>
							<view class="right" @click="handleClick(item)">
								<view class="location"></view>
							</view>
						</view>
					</template>
					<template v-else-if="currentKey == 1">
						<view class="leader-list-item" style="background: #F1F6FC;" v-for="(item, index) in carlist" :key="index" @click="handleClick(item)">
							<view class="left">
								<view class="m-l-10">
									<view class="">
										<text class="name m-r-10">{{ item.name }}</text>
										<u-tag text="内部" size="mini" bgColor="#4481E5" shape="circle"></u-tag>
									</view>
									<view class="m-t-5 flex"> <u-icon name="map"></u-icon><text style="color: #555D6F; font-size: 24rpx;">西采场(挖机)</text> </view>
								</view>
							</view>
							<view class="right">
								<view class="" style="color: #2472F1"> 挖掘机 </view>
								<view class="m-t-5"> 状态: <text :style="{color: '#00B578'}">在线</text>
								</view>
							</view>
						</view>
					</template>
					<template v-else></template>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3])
	let currentKey = ref(0),
		chartData = ref({}),
		chartData1 = ref({}),
		opts = {
			padding: [10, 10, 0, 10],
			enableScroll: false,
			dataLabel: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				mix: 0
			},
			yAxis: {
				gridType: "solid",
				dashLength: 2,
				showTitle: true,
				gridColor: '#E0E6F1',
				data: [{
					min: 0,
					axisLine: false,
					titleFontColor: '#8993A8',
					title: '人'
				}]
			},
			extra: {
				column: {
					type: "group",
					width: 20,
					activeBgColor: "#000000",
					activeBgOpacity: 0.08,
					linearType: "custom",
					seriesGap: 5,
					linearOpacity: 0.5,
					barBorderCircle: true,
					customColor: ["#2172FC", "#fff"]
				}
			}
		},
		opts1 = {
			color: ["#4C63F6", "#F6CC58", "#3CD68B", "#55BEFF", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			dataLabel: true,
			enableScroll: false,
			legend: {
				show: false
			},
			title: {
				name: "预警总数",
				fontSize: 16,
				color: "#333333"
			},
			subtitle: {
				name: "230",
				fontSize: 16,
				color: "#333333"
			},
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				}
			}
		},
		peoplelist = ref([{
			name: '梁佳伦'
		}, {
			name: '梁佳伦'
		}]),
		carlist = ref([{
			name: '新A523666'
		}, {
			name: '新A523666'
		}])
	const selectChange = (item) => {
		currentKey.value = item.index
		if (item.index == 0) {
			// 人员
		} else {
			// 车辆
		}
	}
	const getServerData = () => {
		// 人员区域分布
		setTimeout(() => {
			let res = {
				categories: ["东采场", "西采场", "办公楼", "选煤厂", "选煤厂", "选煤厂"],
				series: [{
					name: "",
					data: [2, 8, 5, 7, 4, 2]
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	const getServerData1 = () => {
		// 告警分析
		setTimeout(() => {
			let res = {
				series: [{
					data: [{
						name: '超速驾驶',
						value: 56,
						labelText: '超速驾驶: 56'
					}, {
						name: '碰撞预警',
						value: 12,
						labelText: '碰撞预警: 56'
					}, {
						name: '疲劳驾驶',
						value: 20,
						labelText: '疲劳驾驶: 20'
					}, {
						name: '其它',
						value: 56,
						labelText: '其它: 56'
					}]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	const handleClick = (item) => {
		uni.navigateTo({
			url: `/pages/dispatch/mancarMonitor/${currentKey.value == 0 ? 'personDetail' : 'carDetail'}`
		})
	}
	getServerData()
	getServerData1()
</script>

<style lang="scss" scoped>
	:deep(.uni-scroll-view-content uni-view) {
		flex-grow: 1;
	}

	.leader-list {
		.leader-list-item {
			margin-top: 12rpx;
			height: 125rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				flex: 1;

				.post {
					color: #555d6f;
				}

				.name {
					color: #0052D9;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				margin-right: 20rpx;

				.location {
					width: 80rpx;
					height: 80rpx;
					background: url('/static/img/arrow.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>